var app = new Vue({
    el: "#app",
    data: {
        // 数量
        name1: 1,
        name2: 1,
        name3: 1,
        name4: 1,
        // 单价
        jg1: "12.60",
        jg2: "32.60",
        jg3: "52.60",
        jg4: "62.60",
        // 小计
        jgzj1: "12.60",
        jgzj2: "32.60",
        jgzj3: "52.60",
        jgzj4: "62.60",
        // 总计
        sum: "0.0",
        zjg: "0"
    },
    methods: {
        // 表单发生改变时触发
        and: function () {
            // 小计
            this.jgzj1 = (this.jg1 * this.name1).toFixed(2);
            // 总计
            this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
            // 总价格
            this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
        },
        and1: function () {
            // 小计
            this.jgzj2 = (this.jg2 * this.name2).toFixed(2);
            // 总计
            this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
            // 总价格
            this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
        },
        and2: function () {
            // 小计
            this.jgzj3 = (this.jg3 * this.name3).toFixed(2);
            // 总计
            this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
            // 总价格
            this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
        },
        and3: function () {
            // 小计
            this.jgzj4 = (this.jg4 * this.name4).toFixed(2);
            // 总计
            this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
            // 总价格
            this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
        },
        // add(递增),sub(递减)
        add1: function () {
            if (this.name1 < 9) {
                this.name1++;
                // Math.floor 向下取整 .toFixed(2) 保留两位小数
                // this.jgzj1 = Math.floor((this.jgzj1 + this.jg1) * 100) / 100; //保留俩位小数
                // 小计
                this.jgzj1 = (this.jg1 * this.name1).toFixed(2);
                // 总计
                this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
                // 总价格
                this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
            }
        },
        sub1: function () {
            if (this.name1 > 1) {
                this.name1--;
                // this.jgzj1 = Math.floor((this.jgzj1 - this.jg1) * 100) / 100; //保留俩位小数
                // 小计
                this.jgzj1 = (this.jg1 * this.name1).toFixed(2);
                // 总计
                this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
                // 总价格
                this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
            }
        },
        add2: function () {
            if (this.name2 < 9) {
                this.name2++;
                // this.jgzj2 = Math.floor((this.jgzj2 + this.jg2) * 100) / 100; //保留俩位小数
                // 小计
                this.jgzj2 = (this.jg2 * this.name2).toFixed(2);
                // 总计
                this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
                // 总价格
                this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
            }

        },
        sub2: function () {
            if (this.name2 > 1) {
                this.name2--;
                // this.jgzj2 = Math.floor((this.jgzj2 - this.jg2) * 100) / 100; //保留俩位小数
                // 小计
                this.jgzj2 = (this.jg2 * this.name2).toFixed(2);
                // 总计
                this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
                // 总价格
                this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
            }
            $(".sanpe_input").prop("checked", $(this).prop("checked"));
        },
        add3: function () {
            if (this.name3 < 9) {
                this.name3++;
                // this.jgzj3 = Math.floor((this.jgzj3 + this.jg3) * 100) / 100; //保留俩位小数
                // 小计
                this.jgzj3 = (this.jg3 * this.name3).toFixed(2);
                // 总计
                this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
                // 总价格
                this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
            }

        },
        sub3: function () {
            if (this.name3 > 1) {
                this.name3--;
                // this.jgzj3 = Math.floor((this.jgzj3 - this.jg3) * 100) / 100; //保留俩位小数
                // 小计
                this.jgzj3 = (this.jg3 * this.name3).toFixed(2);
                // 总计
                this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
                // 总价格
                this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
            }
        },
        add4: function () {
            if (this.name4 < 9) {
                this.name4++;
                // this.jgzj4 = Math.floor((this.jgzj4 + this.jg4) * 100) / 100; //保留俩位小数
                // 小计
                this.jgzj4 = (this.jg4 * this.name4).toFixed(2);
                // 总计
                this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
                // 总价格
                this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
            }
        },
        sub4: function () {
            if (this.name4 > 1) {
                this.name4--;
                // this.jgzj4 = Math.floor((this.jgzj4 - this.jg4) * 100) / 100; //保留俩位小数
                // 小计
                this.jgzj4 = (this.jg4 * this.name4).toFixed(2);
                // 总计
                this.zjg = ((this.name1 - 0) + (this.name2 - 0) + (this.name3 - 0) + (this.name4 - 0));
                // 总价格
                this.sum = ((this.jgzj1 - 0) + (this.jgzj2 - 0) + (this.jgzj3 - 0) + (this.jgzj4 - 0)).toFixed(2);
            }
        },
    }
})
/*   全选
  (1) 全选思路:里面4个小的复选框按钮(sanpe_input)选中状态(checked)跟着全选按钮(checkall)走。
  (2)因为checked是复选框的固有属性,此时我们需要prop()方法获取和设置该属性。
  (3)把全选按钮状态赋值给4个小复选框就可以了
  (4)当我们每次点击小的复选框按钮,就来判断:
  (5)如果小的复选框被选中的个数等于4个就把全选按钮选上,否则全选不选。
  (6):checked选择器 :checked 查找被选中的表单元素
   */
$(function () {
    // 1.全选 和 反 全选
    // change 当输入域发生变化时触发 qbsp_input
    $(".qbsp_input").change(function () {
        $(".sanpe_input,.qbsp_input").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 让所有的商品添加背景色的类 huase 添加类 addClass
            $(".sanpe_ul_li").addClass('huase');
        } else {
            // 移除背景色的类 huase 删除类 removeClass()
            $(".sanpe_ul_li").removeClass('huase');
        }
    });
    // 2.如果小复选框选中的个数等于4个就把全选按钮选上,否则全选不选。
    $(".sanpe_input").change(function () {
        // if (如果被选中的复选框的个数 === 4) {
        //     就把全选按钮选上
        // } else {
        //     否则全选不选
        // }
        if ($(".sanpe_input:checked").length === 4) {
            $(".qbsp_input").prop("checked", true);
        } else {
            $(".qbsp_input").prop("checked", false);
        }
        // 判断是否被选中
        if ($(this).prop("checked")) {
            // 让当前的商品添加背景色的类 huase 添加类 addClass
            $(this).parents(".sanpe_ul_li").addClass('huase');
        } else {
            // 移除当前的商品背景色的类 huase 删除类 removeClass()
            $(this).parents(".sanpe_ul_li").removeClass('huase');
        }
    });
    // 3.删除按钮
    $(".sanpe_ol_li").click(function () {
        $(this).parents(".sanpe_ul_li").remove();
    })
    // 4.删除选中的元素
    $(".qkgwc_span").click(function () {
        // 删除的是小的复选框选中的商品
        $(".sanpe_input:checked").parents(".sanpe_ul_li").remove();
    })
    // 5.清空按钮
    $(".qkgwc_div_span").click(function () {
        $(".sanpe_ul").empty();
    })
})
